<!-- CourseCenter_CourseDetail.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>课程详情</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			/*公共css*/
			body {
				background-color: #fff;
			}
			.test_cell {
				width: 100px;
			}
			.test_cell_title {
				font-size: 14px;
				height: 44px;
			}
			#imageContainer {
				float: left;
				margin: 0;
				width: 40%;
				height: 120px;
				display: -webkit-flex;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: white;
				overflow: hidden;
			}
			#titleContainer {
				float: right;
				width: 60%;
			}
			ul {
				margin: 14px;
			}
			li {
				font-size: 12px;
				margin-top: 10px;
			}
			.courseInfoTitle {
				color: white;
				font-size: 14px;
				font-weight: normal;
			}
			/*#studyBtn{
			 width: 60px;
			 height: 30px;
			 background-color: #188eee;
			 border:1px solid #188eee;
			 border-radius: 4px;
			 color: white;
			 font-size: 14px;
			 }*/
			.tabbar {
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-bottom: 1px solid #e0e0e0;
				background: #fff;
			}
			.tabbar .col {
				font-size: 14px;
			}
			.row {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
			}
			.col {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				position: relative;
				overflow: hidden;
			}
			.indicator-super-div{
				width: 100%;
				height: 2px;
				padding: 0 20%;
				overflow: hidden;
			}
			.indicator {
				height: 2px;
				width: 62%;
				background: #18b4ed;
				position: absolute;
				bottom: 0;
			}
			.weui_tabbar {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
			}
			.title_bulk {
				min-width: 60px;
				height: 44px;
			}
			.back_btn {
				color: white;
				font-size: 16px;
			}
			:focus {
				outline: 0;
			}
			* {
				-webkit-tap-highlight-color: rgba(255,255,255,0);
			}
			input, textarea {
				-webkit-appearance: none;
				border-radius: 0;
			}
			#nav_title {
				font-size: 16px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				word-break: keep-all;
				max-width: 200px;
			}
			#bottom_title {
				float: left;
				height: 52px;
				line-height: 52px;
			}
			#bottom_checkbox {
				float: left;
				padding: 14px;
			}
			#my_study_class {
				width: 120px;
				height: 34px;
				line-height: 34px;
				margin-top: 8px;
				margin-right: 14px;
				float: right;
			}
			#unselected_bottom {
				border-top: 1px solid #ddd;
			}
			#downloadBtn {
				display: block;
				width: 100%;
				height: 30px;
			}
			.whitebg {
				background-color: transparent;
				border-radius: 5px;
				display: block;
				overflow: hidden;
				margin-top: 10px;
				width: 84px;
				height: 30px;
			}
			#download_div {
				visibility: hidden;
			}
			.downloadNotEnbaled {
				background-color: #dfdfdf;
				color: #454545;
				/*border:1px solid #dfdfdf;*/
				border-radius: 5px;
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				display: none;
			}
			#courseInfo {
				/*background-color: #48baff; */
				overflow: hidden;
				height: 158px;
				/*max-height: 200px;*/
				background-image: url(../../image/img_failed.png);
				background-size: 100% 100%;
			}
			.course_info_right_div {
				width: 40%;
				height: 158px;
				/*max-height: 200px;*/
				/*margin: 0;*/
				float: right;
				background-color: rgba(0, 0, 0, 0.5);
				position: relative;
				top: 0;
				right: 0;
				overflow: auto;
			}
			.cancel_download_btn {
				background-image: url(../../image/c.png);
				background-size: 84px 30px;
			}
			.download_btn {
				background-image: url(../../image/a.png);
				background-size: 84px 30px;
			}
			.download_finished_btn {
				background-image: url(../../image/d.png);
				background-size: 84px 30px;
				height: 30px;
				width: 84px;
			}
			.course_exam_div {
				background-color: #ff6601;
				overflow: hidden;
				height: 100%;
				text-align: center;
				color: white;
				font-size: 20px;
				height: 52px;
				line-height: 52px;
			}
			.teacher-mine .user_info_div {
				text-align: center;
				/*background-image: url('../../image/bg_big.png');*/
				color: white;
				background-size: 100% 100%;
				height: 240px;
				background-color: #36353a;
			}
			.teacher-mine .user_info_label {
				text-align: center;
				color: white;
				background-image: url('../../image/bg_small.png');
			}
			.teacher-mine #usericon {
				width: 76px;
				height: 76px;
				border-radius: 4em;
				border: 2px solid #fff;
				overflow: hidden;
				margin-top: 86px;
			}
			.teacher-mine .user_name_div {
				padding: 8px 0;
			}
			.teacher-mine .user_tag_div {
				padding: 20px 80px;
			}
			.teacher-mine table {
				width: 100%;
			}
			.teacher-mine .background-white-line-tr th {
				width: 100px;
				height: 20px;
			}
			.teacher-mine .white-line{
				border-right: 1px solid #fff;
			}
			.teacher-mine #user_school {
				border-right: 1px solid #fff;
			}
			.teacher-mine #user_class {
				border-left: 1px solid #fff;
			}
			.teacher-mine .user_tag_icon {
				height: 24px;
			}
			.teacher-mine .user_info_th {
				padding: 10px;
			}
			.teacher-mine .user_tag_text {
				margin-top: 2px;
			}
			.teacher-mine .cell_img {
				width: 16px;
				height: 16px;
			}
			.teacher-mine .cell_left_img_div {
				width: 26px;
				height: 20px;
				float: left;
				padding: 3px 10px 2px 0;
			}
			.teacher-mine .mui-table-view {
				margin-top: 10px;
			}
			.teacher-mine #offline_btn {
				text-align: center;
			}
			.teacher-mine .user-info{
				position: relative;
				bottom: 32px;
				left: 0;
			}
			.teacher-mine .user-info .user-info-box{
				width: 50%;
			}
			.teacher-mine .user-info .left-box{
				float: left;
				/*padding-right: 40px;*/
			}
			.teacher-mine .user-info .right-box{
				float: right;
				/*padding-left: 40px;*/
			}
			.teacher-mine .user-info .left-title{
				text-align: right;
			}
			.teacher-mine .user-info .right-title{
				text-align: left;
			}
			.teacher-mine .user-info p{
				margin-bottom: 0;
			}
			.teacher-mine .user-info .content-title{
				font-size: 16px;
				color: white;
				text-align: center;
			}
			.teacher-mine .user-info .tag-title{
				font-size: 14px;
				color: #939393;
				text-align: center;
			}
			.teacher-mine .user_info_div .modal-div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 240px;
				background-color: rgba(0,0,0,0.5);
			}
			.teacher-mine .user_info_div .modal-content-div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 240px;
				background-color: rgba(0,0,0,0);
			}
			.teacher-mine .user_info_div .back-btn{
				position: absolute;
				top: 22px;
				left: 0;
				width: 44px;
				height: 44px;
				padding: 12px;
			}
			.teacher-mine .user_info_div .back-btn-img{
				height: 20px;
			}
			.teacher-mine .user_info_div .nav-title-p{
				width: 100%;
				padding: 0 44px;
				position: absolute;
				left: 0;
				top: 22px;
				font-size: 18px;
				line-height: 44px;
				color: white;
				margin-bottom: 0;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.teacher-mine .course-info{
				padding: 10px 15px;
				background-color: #ececec;
				font-size: 18px;
				color: #535353;
			}
			.teacher-mine .course-info-content{
				padding: 20px 15px 60px 15px;
				font-size: 14px;
				color: #535353;
				text-indent: 2em;
				word-wrap:break-word;
			}
			.teacher-mine .footer-view{
				position: fixed;
				left: 0;
				bottom: 0;
				margin: 0;
				width: 100%;
				height: 50px;
				padding: 0;
			}
			.teacher-mine .footer-view .mui-btn-block{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				background-color: #ff9900;
				border-color: #ff9900;
				color: white;
				font-size: 16px;
			}
			.teacher-mine .footer-view .mui-btn-block:active{
				background-color: #ff9900;
			}
			.teacher-mine .user_info_div .course-image{
				width: 100%;
				height: 220px;
				position: absolute;
				left: 0;
				top: 20px;
			}
			.hide-tag{
				display: none;
			}
			.mui-btn, button{
				border-radius: 0px;
			    border-top-left-radius: 0px;
			    border-top-right-radius: 0px;
			    border-bottom-right-radius: 0px;
			    border-bottom-left-radius: 0px;
			}
			.course-image-div{
				background-image: url(../../image/bg_big.png);
				background-repeat: no-repeat;
			    background-size: cover;
			    background-position: center;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../../css/study.css" />
	</head>
	<body>
		<!-- <div id="header" class="base_navigation_bar base_style_color">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span id="nav_title"></span>
			<a class="base_right_item" ">
			</a>
		</div>
		<div id="main" class="base_content_div">
			<div id="courseInfo">
				<div class="course_info_right_div">
					<ul>
						<li>
							<label id="course_title" class="courseInfoTitle"></label>
						</li>
						<li>
							<label class="courseInfoTitle">主讲人：<label id="course_teacher"></label></label>
						</li>
						<li>
							<label class="courseInfoTitle">课时：<label id="course_time"></label>分钟</label>
						</li>
						<li>
							<span id="download_div" class="whitebg"> <button id="downloadBtn" href="javascript:;" class="download_btn" onclick="onDownloadClick();"></button> <label id="downloadComplete" class="download_finished_btn"></label> </span>
						</li>
					</ul>
				</div>
			</div> -->
		<div class="teacher-mine">
			<div id="user_info" class="user_info_div">
				<!-- <img id="course_image" src="../../image/bg_big.png" class="course-image"> -->
				<div id="course_image" class="course-image course-image-div"></div>
				<div class="modal-div"></div>
				<div class="modal-content-div">
					<p id="course_name" class="nav-title-p"></p>
					<a class="back-btn" href="#" onclick="backClick()" style="z-index: 99;">
			            <img class="back-btn-img" src="../../image/icon_jiantou.png" alt="">
			        </a>
					<img id="usericon" src="../../image/icon_teacher_normal.png" alt="">
					<div class="user_tag_div base_tag_font">
						<table>
							<thead>
								<tr class="background-white-line-tr">
									<th class="white-line">
									</th>
									<th>
									</th>
								</tr>
							</thead>
						</table>
						<div class="user-info">
							<div class="user-info-box left-box">
								<p id="speaker" class="left-title content-title">

								</p>
								<p class="left-title tag-title">
									主讲人
								</p>
							</div>
							<div class="user-info-box right-box">
								<p id="course_time" class="right-title content-title">

								</p>
								<p class="right-title tag-title">
									课时
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="selectBar" class="row hightitem tabbar" >
				<div class="col base_dark_grey base_content_font selected-tag hide-tag" id="col1" tapmode onclick="tabswitch(1)">
					章节
					<div class="indicator-super-div">
						<div class="indicator" id="indicator1"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font selected-tag hide-tag"  id="col2" tapmode onclick="tabswitch(2)">
					<span id="question_tag">
						提问
					</span>
					<div class="indicator-super-div">
						<div class="indicator" id="indicator2"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font selected-tag hide-tag" id="col3" tapmode onclick="tabswitch(3)">
					笔记
					<div class="indicator-super-div">
						<div class="indicator" id="indicator3"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font selected-tag hide-tag" id="col4" tapmode onclick="tabswitch(4)">
					资料
					<div class="indicator-super-div">
						<div class="indicator" id="indicator4"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font unselected-tag" id="col5" tapmode onclick="tabswitch(5)">
					介绍
					<div class="indicator-super-div">
						<div class="indicator" id="indicator5"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font unselected-tag"  id="col6" tapmode onclick="tabswitch(6)">
					章节
					<div class="indicator-super-div">
						<div class="indicator" id="indicator6"></div>
					</div>
				</div>
			</div>
			<div id="footer_view" class="footer-view" hidden="hidden">
				<button id="study_btn" type="button" onclick="addCourseClick()" class="mui-btn mui-btn-block">
					+添加课程
				</button>
			</div>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd">
                    <strong id="alert_title" class="weui_dialog_title"></strong>
                </div>
                <div class="weui_dialog_bd"></div>
                <div class="weui_dialog_ft">
                    <a onclick="cleanCancel()" href="#" class="weui_btn_dialog default">取消</a>
                    <a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">立即支付</a>
                </div>
            </div>
        </div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<!-- <script type="text/javascript" src="../../script/databaseOperation.js"></script> -->
	<script type="text/javascript" src="../../script/study_courseTimeRecord.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/PayTreasurePay.js"></script>
	<script type="text/javascript">
		var isSelected = false;
		apiready = function(){
			prepareData();
			setupCourseData();
			laodData();
			setupCourseInfo();
		    setupFrameGroup();
		}
		//准备数据
		function prepareData(){
			if (api.pageParam.selectedStatus == 1) {
				isSelected = true;
			}
		}
		function laodData(){
			var course_param = api.pageParam;
			var urlString = study_course_detail;
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				cid : course_param.courseid,
				jid : $api.getStorage('cfnetppjxid'),
				pid : course_param.planid
			};
			cfnetppPOST(urlString, params, true, function(data, status){
				if (status == 'success') {
					if (data.status == true) {
						var courseData = data.data;
						$('#course_info').text(courseData.courseinfo);
						$('#speaker').text(courseData.speaker);
						var coursetime = courseData.coursenum;
						if (coursetime == null || coursetime == '') {
							coursetime = 0;
						}
						$('#course_time').text(coursetime);
						// $('#usericon').attr('src',imageUrlWithStr(courseData.picurl));
					}else{
						api.toast({
						    msg: '课程详情加载失败'
						});
					}
				}else{
					api.toast({
					    msg: '课程详情加载失败'
					});
				}
			});
		}
		function setupCourseData(){
			var imageUrl = api.pageParam.coverimages;
			// $('#course_image').attr('src',imageUrl);
			$('#course_image').attr('style', 'background-image: url('+imageUrl+')');
			var coursename = api.pageParam.coursename;
			$('#course_name').text(coursename);
		}
		function setupCourseInfo(){
			$('#nav_title').text(api.pageParam.coursename);
			// $('#course_teacher').text(api.pageParam.speaker);
			// var alltimeStr = api.pageParam.alltime;
			// if (alltimeStr == '' || alltimeStr == undefined) {
			// 	alltimeStr = 0;
			// }
			// var alltimenum = parseInt(alltimeStr);
			// $('#course_time').text(alltimenum);
			var coverimages = api.pageParam.coverimages;
			var courseInfoBackgroundImg = "background-image: url(" + coverimages + ");"
			$api.css($api.byId('courseInfo'), courseInfoBackgroundImg);
		}
		function setupFrameGroup(){
			var y = $api.byId('user_info').offsetHeight + $api.byId('selectBar').offsetHeight;
			var h = api.winHeight - y;
			var frames = new Array();
			var selectedIndex = 1;
			if (isSelected == true) {
				$('#footer_view').hide();
				selectedIndex = 1;
				$('.selected-tag').removeClass('hide-tag');
				$('.unselected-tag').addClass('hide-tag');
				frames.push({
					name : 'studyCourseChapter',
					url : '../Study/studyCourseChapter.html',
					pageParam : {
						courseid : api.pageParam.courseid,
						selected : 1,
						courseChecks : 1,
						cstatus : api.pageParam.cstatus,
						imgurl : api.pageParam.imgurl,
						pid : api.pageParam.planid,
						examid : api.pageParam.examid,
						selectStatus : 1,
						isSelectCenter : 1
					}
				});
		    	frames.push({
			        name: 'Teacher_StudyCourseQA',
			        url: '../Teacher_Teach/Teacher_StudyCourseQA.html',
			        pageParam: api.pageParam
					// name : 'chatList',
			  //       url : '../chatModule/chatList.html',
			  //       pageParam : {
			  //       	cid : api.pageParam.courseid,
			  //       	pid : api.pageParam.planid,
			  //       	groupType : 'course'
			  //       }
			    });
			    frames.push({
			        name: 'Teacher_StudyCourseNote',
			        url: '../Teacher_Teach/Teacher_StudyCourseNote.html',
			        pageParam: api.pageParam
			    });
			    frames.push({
			        name: 'Teacher_StudyCourseMaterials',
			        url: '../Teacher_Teach/Teacher_StudyCourseMaterials.html',
			        pageParam: api.pageParam
			    });
			}else{
				$('#footer_view').show();
				$('.selected-tag').addClass('hide-tag');
				$('.unselected-tag').removeClass('hide-tag');
				selectedIndex = 5;
				h = h - $api.byId('footer_view').offsetHeight;
				frames.push({
			        name: 'CourseCenter_CourseInfo',
			        url: 'CourseCenter_CourseInfo.html',
			        pageParam: api.pageParam
			    });
			    var isFreeCourse = true;
			    var score = api.pageParam.score;
				if (score > 0) {
					isFreeCourse = false;
				}
			    frames.push({
					name : 'studyCourseChapter',
					url : '../Study/studyCourseChapter.html',
					pageParam : {
						courseid : api.pageParam.courseid,
						selected : 1,
						courseChecks : 1,
						isFreeCourse : isFreeCourse,
						cstatus : api.pageParam.cstatus,
						imgurl : api.pageParam.imgurl,
						pid : api.pageParam.planid,
						examid : api.pageParam.examid,
						selectStatus : 0,
						isSelectCenter : 1
					}
				});
			}
			api.openFrameGroup({
			    name: 'CourseFrameGroup',
			    rect: {
			         x: 0,
			         y: y,
			         w: 'auto',
			         h: h
			    },
			    scrollEnabled: false,
			    index: 0,
			    preload: 0,
			    frames: frames
			}, function(ret, err) {
			});
			tabswitch(selectedIndex);
		}
		function tabswitch(index){
			$('.indicator').attr('style','display:none;');
			$('.col').attr('style', 'color:#323232;');
			$('#col'+index).attr('style','color:#18b4ed;');
			$('#indicator'+index).attr('style','display:block;');
			var selectIndex = index;
			if (selectIndex > 4) {
				selectIndex -= 4;
			}
			setupGroupIndex(selectIndex-1);
		}
		function setupGroupIndex(index){
			api.setFrameGroupIndex({
			    name: 'CourseFrameGroup',
			    index: index,
			    scroll: false
			});
		}
		function backClick(){
			api.closeWin();
		}
		function imageUrlWithStr(string){
			if (string == null || string == undefined || string == '') {
				return '';
			}
			if (string.indexOf("http://") == -1) {
				if (string.indexOf("learn/") == -1) {
					return 'http://bos.cfnet.org.cn/' + string;
				}else{
					return 'http://cfnet.org.cn/data/uploads/' + string;
				}
			}else{
				return string;
			}
		}
		function addCourseClick(){
			var score = api.pageParam.score;
			score = parseFloat(score.toString());
			score = score.toFixed(2);
			if (score > 0) {
				api.setFrameGroupAttr({
				    name: 'CourseFrameGroup',
				    hidden: true
				});
				$('#alert_title').text('购买课程《'+api.pageParam.coursename+'》需支付￥'+score);
				$("#offlineAlert").show();
			}else{
				addCourse();
			}
		}
		function cleanCancel(){
			$("#offlineAlert").hide();
			api.setFrameGroupAttr({
			    name: 'CourseFrameGroup',
			    hidden: false
			});
		}
		function cleanConfirm(){
			$("#offlineAlert").hide();
			api.setFrameGroupAttr({
			    name: 'CourseFrameGroup',
			    hidden: false
			});
			// addCourse();
			$api.setStorage('cid', api.pageParam.courseid);
			$api.setStorage('add_coursename', api.pageParam.coursename);
			getOrderNumber(5,api.pageParam.courseid,1);
		}
		function addCourse(){
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				cid : api.pageParam.courseid,
				jid : $api.getStorage('cfnetppjxid'),
				message:api.pageParam.coursename
			};
			cfnetppPOST(url_addCourse, param, false, function(data, status){
				SendBusinessOperationsLogNotifi('选课中心课程详情页', '081', param, param, '', data, '添加课程接口', '081-02');
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '添加成功'
						});
						isSelected = true;
						api.closeFrameGroup({
						    name: 'CourseFrameGroup'
						});
						$('#footer_view').hide();
						setupFrameGroup();
						api.sendEvent({
						    name: 'refreshCourseListNotifi',
						    extra: {
						        cid: api.pageParam.courseid
						    }
						});
						//添加成功后算一次浏览
						addCourseBrowsWithCid(api.pageParam.courseid);
					}else{
						api.toast({
						    msg: '添加失败'
						});
					}
				}else{
					api.toast({
					    msg: '添加失败'
					});
				}
			});
		}
	</script>
</html>
